<template>
	<div class="main">
		<div class="content">
			<input type="text" :placeholder="currentPlaceholder" ref="searchWord">
			<span class="iconfont icon-sousuo" @click="search(this.$refs.searchWord.value)"></span>
		</div>
		<div class="hotword">
			<a v-for="(item,key) in hotWords"
			:key="key"
			:class = "item.active==true?'active':''"
			href="#"
			@click="search(item.word)">{{item.word}}</a>
		</div>
	</div>
</template>

<script setup>
import {ref} from 'vue';
import { useRouter } from 'vue-router';
import GoodsListVue from '@/views/GoodsList/GoodsList.vue';
	const router = useRouter();
		const hotWords = ref([
			{"word":"手机", "active":false},
			{"word":"健身", "active":true},
			{"word":"卫生纸", "active":false},
			{"word":"潮鞋", "active":false},
			{"word":"户外", "active":false},
		])
		
		const search=(keyword)=>{
			router.push("/goods/"+ keyword +"/1/")
			hotWords.value.forEach((d)=>{
				if(d.word==keyword){
					d.active=true;
				}else{
					d.active=false;
				}
			})
		}
		
		const placeholderList = ref([
		  "在此搜索世界",
		  "一切皆有可能",
		  "探索无限可能",
		  "找寻真的自我"
		]);
		const currentPlaceholder = ref(placeholderList.value[0]);
		
		// 设置定时器，每隔一段时间切换占位符
		const intervalId = setInterval(() => {
			// 获取当前占位符的索引
			const currentIndex = placeholderList.value.indexOf(currentPlaceholder.value);
			// 计算下一个占位符的索引，并使用模运算来循环数组
			const nextIndex = (currentIndex + 1) % placeholderList.value.length;
			// 更新currentPlaceholder的值为下一个占位符
			currentPlaceholder.value = placeholderList.value[nextIndex];
		}, 2000); // 每3
</script>

<style lang="less" scoped>
	@red: #e2231a;
	.main{
		margin-top: 45px;
		.content{
			width: 550px;
			height: 35px;
			border: 2px solid @red;
			margin-left: 80px;
			input{
				width: 485px;
				line-height: 35px;
				height: 35px;
				padding-left: 15px;
			}
			span{
				display: inline-block;
				background-color: @red;
				width: 50px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: white;
				font-weight: 700;
				&:hover{
					cursor:pointer;
					background-color: #c81523;
				}
			}
			.hotword{
				margin-left: 80px;
				margin-top: 10px;
				a{
					color: #999;
					margin-right: 10px;
					&:hover{
						color: @red;
					}
				}
				.active{
					color: @red;
				}
			}
		}
	}
</style>